<template>
  <div class="content">
    <div class="info">
      <div class="user_card">
        <el-image
          style=" width: 160px; height: 160px;vertical-align: middle;border-radius: 50%;float: left;margin: 20px 10px"
          :src="this.userInfo.avatar"
          fit="fill"
        ></el-image>
        <div class="user_card_info">
          <p style="font-size: 22px;color: #616161">
            {{ this.userInfo.username }}
          </p>
        </div>
      </div>
      <div class="user_action">
        <p><span>账号安全:</span><span>普通</span></p>
        <p>
          <span>绑定手机:</span
          ><span>{{
            this.userInfo.contactInformation == ""
              ? " 暂未绑定"
              : this.userInfo.contactInformation | phoneFilter
          }}</span>
        </p>
        <p>
          <span>绑定邮箱:</span
          ><span>{{
            this.userInfo.email == "" ? " 暂未绑定" : this.userInfo.email
          }}</span>
        </p>
      </div>
    </div>
    <div class="box_info">
      <div class="safeindex-authlist clearfix">
        <div class="list-item">
          <div class="list-ico sjh-ico"></div>
          <div class="list-tit">手机号</div>
          <div class="list-desc">
            {{ this.userInfo.contactInformation | phoneFilter }}
          </div>
          <div class="list-opbtn">
            <a @click="open_phenum" class="list-btn">{{
              this.userInfo.contactInformation == ""
                ? " 绑定手机号"
                : " 修改手机号"
            }}</a>
          </div>
          <div
            class="list-opbtn"
            style=" margin-top:10px "
            v-if="this.userInfo.contactInformation != ''"
          >
            <a @click="opeb_jiephone" class="list-btn">解绑</a>
          </div>
          <div
            class="list-status "
            :class="
              this.userInfo.contactInformation == ''
                ? ' status-lock'
                : ' status-unlock'
            "
          >
            <i></i>
          </div>
        </div>
        <div class="list-item">
          <div class="list-ico dlmm-ico"></div>
          <div class="list-tit">登录密码</div>
          <div class="list-desc">定期更换密码有助于账号安全</div>
          <div class="list-opbtn">
            <a @click="open_pawss" class="list-btn">{{
              this.userInfo.password == "" ? "设置登录密码 " : " 修改登录密码"
            }}</a>
          </div>
          <div
            class="list-status "
            :class="
              this.userInfo.password == '' ? ' status-lock' : ' status-unlock'
            "
          >
            <i></i>
          </div>
        </div>

        <div class="list-item">
          <div class="list-ico yx-ico"></div>
          <div class="list-tit">邮箱</div>
          <div class="list-desc">设置邮箱有助于您的账号易用</div>
          <div class="list-opbtn">
            <a @click="open_emil" class="list-btn">{{
              this.userInfo.email == "" ? " 绑定邮箱" : " 修改邮箱"
            }}</a>
          </div>
          <div
            class="list-opbtn"
            style=" margin-top:10px "
            v-if="this.userInfo.email != ''"
          >
            <a @click="open_jiephenum" class="list-btn">解绑</a>
          </div>
          <div
            class="list-status "
            :class="
              this.userInfo.email == '' ? ' status-lock' : ' status-unlock'
            "
          >
            <i></i>
          </div>
        </div>

        <div class="list-item">
          <div class="list-ico mbwt-ico"></div>
          <div class="list-tit">密保问题</div>
          <div class="list-desc">开启有助您快速通过安全认证</div>
          <div class="list-opbtn">
            <a class="list-btn">启用密保问题</a>
          </div>
          <div class="list-status status-lock"><i></i></div>
        </div>
      </div>
    </div>

    <el-dialog
      class="tancuang"
      :title="
        this.userInfo.contactInformation == '' ? ' 绑定手机号' : ' 修改手机号'
      "
      :visible.sync="dialogFormVisible1"
    >
      <el-form
        status-icon
        :label-position="labelPosition"
        :model="formphenum"
        ref="formphenum"
        :rules="rules"
      >
        <el-form-item label="手机号" prop="phoneNum">
          <el-input
            style="width:200px"
            v-model.number="formphenum.phoneNum"
          ></el-input>
        </el-form-item>
        <el-form-item label="验证码">
          <el-col :span="12">
            <el-form-item>
              <el-input style="width:200px" v-model="formphenum.yzm"></el-input>
            </el-form-item>
          </el-col>

          <button
            type="button"
            @click="submitForm1('formphenum')"
            class="layui-btn"
            :class="activeClass == 0 ? 'layui-btn-disabled form' : ''"
          >
            {{ this.yzm }}
          </button>
          <!-- <el-button :disabled="true"   @click="yzm1" >{{this.yzm}}</el-button> -->
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="phoneNum_up">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      class="tancuang"
      title="解绑手机号"
      :visible.sync="dialogFormVisible1_1"
    >
      <el-form
        status-icon
        :label-position="labelPosition"
        :model="formphenum"
        ref="formphenum"
        :rules="rules"
      >
        <el-form-item label="手机号" prop="phoneNum">
          <el-input
            style="width:200px"
            v-model.number="formphenum.phoneNum"
          ></el-input>
        </el-form-item>
        <el-form-item label="验证码">
          <el-col :span="12">
            <el-form-item>
              <el-input style="width:200px" v-model="formphenum.yzm"></el-input>
            </el-form-item>
          </el-col>

          <button
            type="button"
            @click="submitForm1('formphenum')"
            class="layui-btn"
            :class="activeClass == 0 ? 'layui-btn-disabled form' : ''"
          >
            {{ this.yzm }}
          </button>
          <!-- <el-button :disabled="true"   @click="yzm1" >{{this.yzm}}</el-button> -->
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1_1 = false">取 消</el-button>
        <el-button type="primary" @click="phoneNum_up">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      class="tancuang"
      title="修改密码"
      :visible.sync="dialogFormVisible2"
    >
      <el-form
        :label-position="labelPosition"
        :model="formpassword"
        :rules="rules"
        ref="formpassword"
      >
        <el-form-item label="旧密码">
          <el-input
            type="password"
            style="width:200px"
            v-model="formpassword.oldpassword"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-form-item prop="newpassword">
            <el-input
              type="password"
              style="width:200px"
              v-model="formpassword.newpassword"
            ></el-input>
          </el-form-item>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="submitForm2('formpassword')"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      class="tancuang"
      title="绑定邮箱"
      :visible.sync="dialogFormVisible3"
    >
      <el-form
        status-icon
        :label-position="labelPosition"
        :model="fromemail"
        :rules="rules"
        ref="fromemail"
      >
        <el-form-item label="邮箱号" prop="email">
          <el-input style="width:200px" v-model="fromemail.email"></el-input>
        </el-form-item>
        <el-form-item label="验证码">
          <el-col :span="12">
            <el-form-item>
              <el-input style="width:200px" v-model="fromemail.yzm"></el-input>
            </el-form-item>
          </el-col>

          <button
            type="button"
            @click="submitForm3('fromemail')"
            class="layui-btn"
            :class="activeClass == 0 ? 'layui-btn-disabled form' : ''"
          >
            {{ this.yzm }}
          </button>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="email_up">确 定</el-button>
      </div>
    </el-dialog>

       <el-dialog
      class="tancuang"
      title="解绑邮箱"
      :visible.sync="dialogFormVisible3_3"
    >
      <el-form
        status-icon
        :label-position="labelPosition"
        :model="fromemail"
        :rules="rules"
        ref="fromemail"
      >
        <el-form-item label="邮箱号" prop="email">
          <el-input style="width:200px" v-model="fromemail.email"></el-input>
        </el-form-item>
        <el-form-item label="验证码">
          <el-col :span="12">
            <el-form-item>
              <el-input style="width:200px" v-model="fromemail.yzm"></el-input>
            </el-form-item>
          </el-col>

          <button
            type="button"
            @click="submitForm3('fromemail')"
            class="layui-btn"
            :class="activeClass == 0 ? 'layui-btn-disabled form' : ''"
          >
            {{ this.yzm }}
          </button>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible3_3 = false">取 消</el-button>
        <el-button type="primary" @click="email_up">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Tabs from "../../zhuye/Tabs/usertabs";
import axios from "axios";
// <!--用户中心-->
export default {
  components: { Tabs },
  data() {
    var checkNumber = (rule, value, callback) => {
      var regMobile = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else if (!Number.isInteger(value)) {
        callback(new Error("请输入数字值"));
      } else if (!regMobile.test(value)) {
        callback(new Error("请输入有效的11位手机号码！"));
      } else {
        if (this.userInfo.contactInformation == "") {
          this.ifphone(value);
          setTimeout(() => {
            if (this.type == 404) {
              return callback(new Error("手机号已经被绑定"));
            } else {
              return callback();
            }
          }, 3000);
        } else {
          setTimeout(() => {
            if (this.userInfo.contactInformation != value) {
              return callback(new Error("手机号输入错误"));
            } else {
              return callback();
            }
          }, 3000);
        }
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (value.length > 12 || value.length < 6) {
          callback(new Error("密码位数必须在6和11位之间"));
        }
        callback();
      }
    };
    var email = (rule, value, callback) => {
      var emailrule = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (!value) {
        return callback(new Error("邮箱不能为空"));
      }

      if (!emailrule.test(value)) {
        callback(new Error("请输入有效的邮箱地址！"));
      } else {
        if(this.userInfo.email == ""){
            this.isemail(value); //发请求是否注册

        setTimeout(() => {
          if (this.type == 404) {
            return callback(new Error("该邮箱号已经被绑定"));
          } else {
            return callback();
          }
        }, 3000);
        }else{
          
            setTimeout(() => {
          if (this.userInfo.email!= value) {
            return callback(new Error("该邮箱号与绑定的邮箱不一致"));
          } else {
            return callback();
          }
        }, 1000);
          
        }
        
      }
    };
    return {
      activeName: "first",
      yzm: "发送验证码",
      labelPosition: "left",
      activeClass: 1,
      userInfo: "",
      type: "",
      number: "",
      formphenum: {
        phoneNum: "",
        yzm: "",
        type: 0, //是否绑定手机号
      },
      formpassword: {
        oldpassword: "",
        newpassword: "",
        type: 0, //是否设置密码
      },
      fromemail: {
        email: "",
        yzm: "",
        type: 0, //是否绑定邮箱
      },
      dialogTableVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible1_1: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
       dialogFormVisible3_3: false,
      rules: {
        email: [{ validator: email, trigger: "blur" }],
        newpassword: [{ validator: validatePass, trigger: "blur" }],
        // checkPass: [{ validator: validatePass2, trigger: "blur" }],
        phoneNum: [{ validator: checkNumber, trigger: "blur" }],
        // name: [{ validator: checkName, trigger: "blur" }],
      },
    };
  },
  mounted() {},
  methods: {
    submitForm1(formName) {
      //发送验证码
      this.$message("正在验证手机号是否可用");
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var time = 60;
          var time1 = setInterval(() => {
            ;
            this.activeClass = 0;
            time--, (this.yzm = time + "秒");
            if (time == 0) {
              this.activeClass = -1;
              this.yzm = "重新发送";
              this.disablen = true;
              clearInterval(time1);
            }
          }, 1000);
          axios.get("/code/createModifyCode").then((res) => {
            //生成验证码
            ;
            axios
              .get("/code/sendPhoneCode", {
                params: {
                  phoneNum: this.formphenum.phoneNum,
                  type: 3,
                },
              })
              .then((res) => {
                ;

                this.$message({
                  message: res.data.msg,
                  type: "success",
                });
              });
          });
        } else {
          ;
          return false;
        }
      });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    phoneNum_up() {
      //提交手机号
      var params = new URLSearchParams();
      params.append("yzm", this.formphenum.yzm);
      axios.post("/code/verifyModifyCode", params).then((res) => {
        //校验验证码
        ;
        if (res.data.code == 404) {
          ;
          this.$message.error("验证码错误，请重新输入");
        } else {
          var params = new URLSearchParams();
          if (this.userInfo.contactInformation == "") {
            params.append("phoneNum", this.formphenum.phoneNum);
            params.append("userId", this.userInfo.userId);
            axios.post("/fl-user/changeUserPhoneNum", params).then((res) => {
              ;
              this.dialogFormVisible1 = false;
              if (this.userInfo.contactInformation == "") {
                if(this.userInfo.contactInformation == ""){
                   this.$message({
                  message: "绑定手机号成功",
                  type: "success",
                });
                }else{
                   this.$message({
                  message: "修改手机号成功",
                  type: "success",
                });
                }
               
                this.userInfo.contactInformation = this.formphenum.phoneNum;
                this.$store.commit("SET_USERINFO", this.userInfo); //更新缓存
                //  this.$router.go(0);
              }
            });
          }else{
             params.append("userId", this.userInfo.userId);
              axios.post("/fl-user/unBingPhoneNum", params).then((res) => {
              ;
              this.dialogFormVisible1_1 = false;
              if (this.userInfo.contactInformation != "") {
                this.$message({
                  message: "解绑手机号成功",
                  type: "success",
                });
                this.
                this.userInfo.contactInformation ='';
                this.$store.commit("SET_USERINFO", this.userInfo); //更新缓存
                //  this.$router.go(0);
              }
            });
          }
        }
      });
    },

    ifphone(number) {
      axios
        .get("/fl-searchUser/existUserByPhoneNum", {
          params: {
            phoneNum: this.formphenum.phoneNum,
          },
        })
        .then((res) => {
          ;
          this.type = res.data.code;
          ;
        });
    },

    //修改密码

    submitForm2(formName) {
      ;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          ;
          var params = new URLSearchParams();
          params.append("newPassword", this.formpassword.newpassword);
          params.append("oldPassword", this.formpassword.oldpassword);
          params.append("username", this.userInfo.username);
          axios
            .post("/fl-user/changePasswordByOldPassword", params)
            .then((res) => {
              //修改密码
              ;
              if (res.data.code == 404) {
                this.$message.error("旧密码错误，请重新输入");
              } else {
                this.$message({
                  message: "修改密码成功",
                  type: "success",
                });
                this.userInfo.password = this.formpassword.newpassword;
                this.$store.commit("SET_USERINFO", this.userInfo); //更新缓存
                this.$router.go(0);
              }
            });
        } else {
          ;
          return false;
        }
      });
    },

    //绑定邮箱

    submitForm3(formName) {
      //发送验证码
      this.$refs[formName].validate((valid) => {
        this.$message("正在验证邮箱是否可用");
        if (valid) {
          var time = 60;
          var time1 = setInterval(() => {
            ;
            this.activeClass = 0;
            time--, (this.yzm = time + "秒");
            if (time == 0) {
              this.activeClass = -1;
              this.yzm = "重新发送";
              this.disablen = true;
              clearInterval(time1);
            }
          }, 1000);
          axios.get("/code/createModifyCode").then((res) => {
            //生成验证码
            ;
            axios
              .get("/code/sendEmail", {
                //发送邮箱验证码
                params: {
                  email: this.fromemail.email,
                  type: 2,
                },
              })
              .then((res) => {
                this.$message({
                  message: res.data.msg,
                  type: "success",
                });
              });
          });
        } else {
          ;
          return false;
        }
      });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    email_up() {
      //提交邮箱号
      var params = new URLSearchParams();
      params.append("yzm", this.fromemail.yzm);
      axios.post("/code/verifyModifyCode", params).then((res) => {
        //校验验证码
        ;
        if (res.data.code == 404) {
          ;
          this.$message.error("验证码错误，请重新输入");
        } else {
          var params = new URLSearchParams();
          if(this.userInfo.email==''){
             params.append("email", this.fromemail.email);
          params.append("userId", this.userInfo.userId);
          axios.post("/fl-user/changeUserEmail", params).then((res) => {
            ;
            this.dialogFormVisible3 = false;
            if(this.userInfo.email==''){
              this.$message({
              message: "绑定邮箱号成功",
              type: "success",
            });
            }else{
              this.$message({
              message: "修改邮箱号成功",
              type: "success",
            });
            }
            
            this.userInfo.email = this.fromemail.email;
            this.$store.commit("SET_USERINFO", this.userInfo); //更新缓存
            // this.$router.go(0);
          });
          }else{
               params.append("userId", this.userInfo.userId);
          axios.post("/fl-user/unBindEmail", params).then((res) => {
            ;
            this.dialogFormVisible3_3 = false;
            
              this.$message({
              message: "解绑邮箱号成功",
              type: "success",
            });
           
            
            this.userInfo.email ='';
            this.$store.commit("SET_USERINFO", this.userInfo); //更新缓存
            // this.$router.go(0);
          });
          }
         
        }
      });
    },

    isemail(number) {
      axios
        .get("/fl-searchUser/existUserByEmail", {
          params: {
            email: this.fromemail.email,
          },
        })
        .then((res) => {
          ;
          this.type = res.data.code;
          ;
        });
    },
    //解绑手机号


    handleClick(tab, event) {
      ;
    },
    open_phenum() {
      this.dialogFormVisible1 = true;
    },
    opeb_jiephone() {
      this.dialogFormVisible1_1 = true;
    },
    open_pawss() {
      this.dialogFormVisible2 = true;
    },
    open_emil() {
      this.dialogFormVisible3 = true;
    },
    open_jiephenum(){
      this.dialogFormVisible3_3 = true;
    }
  },
  created() {
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    ;
  },
  filters: {
    //电话号码过滤器
    phoneFilter(val) {
      let reg = /^(.{3}).*(.{4})$/;
      return val.toString().replace(reg, "$1****$2"); //号码要转换成string类型，否则无法使用正则
    },
  },
};
</script>

<style>
.tancuang {
  width: 1000px;
  margin-left: 30%;
  margin-top: 10%;
}
.content {
  width: 60%;

  background-color: white;
}

.info {
  width: 940px;
  height: 200px;
  margin: 0px auto;
  background-color: #ffffff;
  /*border-bottom: 1px solid #d9d9d9;*/
}

.user_card {
  width: 540px;
  height: 200px;
  float: left;
}

.user_card_info {
  margin: 75px 0px;
  width: 200px;
  height: 100px;
  display: inline-block;
  line-height: 30px;
}
.user_action {
  float: left;
  width: 400px;
  height: 200px;
  padding-top: 65px;
}
.content span {
  color: #757575;
  font-size: 15px;
  margin: 0px 5px;
  line-height: 30px;
}
.box_info {
  width: 100%;
  height: 380px;
  margin-top: 120px;
}

.noMesInfo {
  text-align: center;
  font-size: 18px;
  color: #757575;
  line-height: 60px;
}

.secure_box {
  margin: 12px auto 0px;
  width: 960px;
  height: 100px;
  border-top: 1px solid #e5e5e5;
  /*border-bottom: 1px solid #e5e5e5;*/
}

.secure_logo {
  display: inline-block;
  width: 60px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 30px;
  color: #ff7f52;
  vertical-align: top;
}

.secure_title {
  display: inline-block;
  width: 700px;
  height: 100px;
  vertical-align: top;
  padding-top: 25px;
}

.secure_action {
  display: inline-block;
  width: 190px;
  height: 100px;
  text-align: right;
  line-height: 100px;
  vertical-align: top;
}

.text_msg {
  color: #757575;
  font-size: 14px;
  line-height: 23px;
}

.bind_list {
  width: 230px;
  height: 150px;
  /*border: 1px solid #cacaca;*/
  display: inline-block;
  margin-right: 30px;
  margin-top: 20px;
  padding: 20px 10px;
  vertical-align: top;
}
.bookImg {
  margin-top: 10px;
  float: left;
  width: 90px;
  height: 90px;
  border-radius: 10px;
}
.bind_account {
  float: left;
  width: 100px;
  height: 105px;
  padding-top: 15px;
  text-align: center;
}
.bind_btn {
  width: 80px;
  height: 20px;
  background-color: white;
  border: 1px solid #e1e1e1;
}
.modify_box {
  margin-top: 30px;
  width: 400px;
  height: 270px;
  /*border: 1px solid #dfdfdf;*/
  padding: 15px;
}

.safeindex-authlist {
  margin: 20px auto 0;
}

.safeindex-authlist .list-item {
  position: relative;
  float: left;
  width: 180px;
  height: 240px;
  padding: 36px 33px 25px;
  margin: 0 21px 21px 0;
  background: #fff;
}

.safeindex-authlist .list-item:nth-child(4n + 0) {
  margin-right: 0;
}

.safeindex-authlist .list-status {
  position: absolute;
  right: 0;
  top: 0;
  width: 41px;
  height: 47px;
}

.safeindex-authlist .list-status i {
  display: block;
  position: absolute;
  right: 1px;
  top: 3px;
  width: 22px;
  height: 21px;
}

.safeindex-authlist .status-unlock {
  background: url(//misc.360buyimg.com/user/myjd/safe/auth/rubik/2.0.34/css/i/green-bg.png);
}

.safeindex-authlist .status-unlock i {
  background: url(//misc.360buyimg.com/user/myjd/safe/auth/rubik/2.0.34/css/i/unlock.png)
    no-repeat 50%;
}

.safeindex-authlist .status-lock {
  background: url(//misc.360buyimg.com/user/myjd/safe/auth/rubik/2.0.34/css/i/gray-bg.png);
}

.safeindex-authlist .status-lock i {
  background: url(//misc.360buyimg.com/user/myjd/safe/auth/rubik/2.0.34/css/i/lock.png)
    no-repeat 50%;
}

.safeindex-authlist .list-ico {
  width: 84px;
  height: 70px;
  margin: 0 auto 25px;
  background-repeat: no-repeat;
  background-image: url(//misc.360buyimg.com/user/myjd/safe/auth/rubik/2.0.34/css/i/auth-index-ico.png);
  overflow: hidden;
}

.safeindex-authlist .sjh-ico {
  background-position: 0 0;
}

.safeindex-authlist .dlmm-ico {
  background-position: 0 -80px;
}

.safeindex-authlist .smrz-ico {
  background-position: -94px -240px;
}

.safeindex-authlist .szzs-ico {
  background-position: 0 -400px;
}

.safeindex-authlist .yx-ico {
  background-position: 0 -240px;
}

.safeindex-authlist .dlbh-ico {
  background-position: 0 -320px;
}

.safeindex-authlist .zfmm-ico {
  background-position: 0 -160px;
}

.safeindex-authlist .mbwt-ico {
  background-position: -94px -320px;
}

.safeindex-authlist .lock_pc-ico {
  background-position: -94px -160px;
}

.safeindex-authlist .qysmrz-ico {
  background-position: -94px -400px;
}

.safeindex-authlist .lock_app-ico {
  background-position: -94px 0;
}

.safeindex-authlist .lock_wx-ico {
  background-position: -94px -80px;
}

.safeindex-authlist .list-tit {
  margin-bottom: 17px;
  font-size: 20px;
  color: #333;
  letter-spacing: -0.31px;
  text-align: left;
  text-align: center;
}

.safeindex-authlist .list-desc {
  height: 18px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #999;
  letter-spacing: -0.22px;
  line-height: 18px;
  text-align: center;
}

.safeindex-authlist .list-desc.ac {
  text-align: center;
}

.safeindex-authlist .list-btn {
  display: block;
  background: #fff;
  border: 1px solid #999;
  width: 198px;
  height: 46px;
  line-height: 46px;
  font-size: 16px;
  color: #333;
  letter-spacing: -0.25px;
  text-align: center;
  text-decoration: none;
}

.safeindex-authlist .list-btn:hover {
  border-color: #e2231a;
  color: #e2231a;
  cursor: pointer;
}

.safeindex-authlist .list-btn-disabled,
.safeindex-authlist .list-btn-disabled:hover {
  border-color: #ccc;
  color: #ccc;
}

.safeindex-authlist .disable {
  cursor: not-allowed;
}
.el-image__error,
.el-image__inner,
.el-image__placeholder {
  width: 100%;
  height: 120%;
}
</style>
